<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { NGrid, NGridItem } from 'naive-ui'
const localStorage = window.localStorage
let imageSizeX = localStorage.getItem('imageSizeX')
let imageSizeY = localStorage.getItem('imageSizeY')

console.log(imageSizeX, imageSizeY)
let imageOffsetX = localStorage.getItem('imageOffsetX')
let imageOffsetY = localStorage.getItem('imageOffsetY')
let imageAlpha = localStorage.getItem('imageAlpha')

const settings = ref({
  imageSizeX: imageSizeX != null ? Number(imageSizeX) : 1240,
  imageSizeY: imageSizeY != null ? Number(imageSizeY) : 1940,
  imageOffsetX: imageOffsetX != null ? Number(imageOffsetX) : 234,
  imageOffsetY: imageOffsetY != null ? Number(imageOffsetY) : 817,
  imageAlpha: imageAlpha != null ? Number(imageAlpha) : 100
})

watch(settings.value, (newValue, _) => {
  localStorage.setItem('imageSizeX', String(newValue.imageSizeX))
  localStorage.setItem('imageSizeY', String(newValue.imageSizeY))
  localStorage.setItem('imageOffsetX', String(newValue.imageOffsetX))
  localStorage.setItem('imageOffsetY', String(newValue.imageOffsetY))
  localStorage.setItem('imageAlpha', String(newValue.imageAlpha))
  window.electronAPI.SetPos(JSON.parse(JSON.stringify(settings.value)))
})

const isTop = ref(localStorage.getItem('isTop') == 'true')
const updateTop = () => {
  localStorage.setItem('isTop', String(isTop.value))
  window.electronAPI.SetTop(isTop.value)
}
onMounted(() => {
  localStorage.setItem('imageSizeX', String(settings.value.imageSizeX))
  localStorage.setItem('imageSizeY', String(settings.value.imageSizeY))
  localStorage.setItem('imageOffsetX', String(settings.value.imageOffsetX))
  localStorage.setItem('imageOffsetY', String(settings.value.imageOffsetY))
  localStorage.setItem('imageAlpha', String(settings.value.imageAlpha))
  localStorage.setItem('isTop', String(isTop.value))
})

</script>

<template>
  <!-- 设置界面 -->
  <div class="settings">
    <n-card title="图像设置">
      <div class="settings-form">
        <n-form ref="form" :model="settings">
          <n-grid cols="2" x-gap="24" y-gap="16">
            <n-grid-item>
              <n-form-item label="图片宽度">
                <n-input-number :update-value-on-input="false" v-model:value="settings.imageSizeX" />
              </n-form-item>
            </n-grid-item>

            <n-grid-item>
              <n-form-item label="图片高度">
                <n-input-number :update-value-on-input="false" v-model:value="settings.imageSizeY" />
              </n-form-item>
            </n-grid-item>

            <n-grid-item>
              <n-form-item label="图片偏移X">
                <n-input-number :update-value-on-input="false" v-model:value="settings.imageOffsetX" />
              </n-form-item>
            </n-grid-item>

            <n-grid-item>
              <n-form-item label="图片偏移Y">
                <n-input-number :update-value-on-input="false" v-model:value="settings.imageOffsetY" />
              </n-form-item>
            </n-grid-item>
          </n-grid>
        </n-form>
      </div>
    </n-card>
    <n-card title="窗口设置">
      <n-grid cols="2" x-gap="24" y-gap="16" style="align-items: center;">
        <n-grid-item>
          <n-checkbox v-model:checked="isTop" @update:checked="updateTop"> 置顶窗口</n-checkbox>
        </n-grid-item>
        <n-grid-item>
          <div style="display: flex; align-items: center; justify-content: center;">
            <div style="width: 100px">透明度</div>
            <n-slider v-model:value="settings.imageAlpha"></n-slider>
          </div>
        </n-grid-item>
      </n-grid>
    </n-card>

  </div>

</template>

<style scoped>
.settings {
  width: 95%;
  height: 100%;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
}


.settings-form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
